<template>
    <div>
        <h3>-----toref---torefs------</h3>
        <p>用户信息：{{ user.id }}--{{ user.name }}</p>
        <p>学科信息：{{ name }}--{{ number }}</p>
        <p>学科名称-toref:{{ subjectName }}</p>
        <p>用户-torefs:{{ age }}--{{ sex }}</p>
        <button @click="change">修改信息</button>
    </div>
</template>

<script>
// 引入需要的api方法
import { reactive, toRef, toRefs } from "vue"
export default {
    setup() {

        // 1.使用reactive定义数据
        let user = reactive({id:11,name:'小白'})
        let subject = reactive({ name: "web", number: 500 })
        let info = reactive({ age: 20, sex: "男" })



        // 2.直接解构导致响应式失败
        // let name = subject.name  //不再执行原数据响应式地址  而是生成新的数据
        // let number = subject.number


        // 3.使用toref单个赋值
        let subjectName = toRef(subject, "name") //保持新数据和原数据映射关系
        console.log(subjectName)


        // 修改数据
        function change() {
            user.name = "张三"
            subject.name = "java"
            subjectName = "php"
            info.sex = "女"
            info.age = 100
        }


        // 返回数据给页面
        return {
            // 直接返回对象
            user,
            // 解构返回数据
            ...subject,
            subjectName,
            ...toRefs(info),
            change
        }
    }
};
</script>

<style scoped></style>
